<template>
  <div class="box">
    <div class="left">
      <div class="nav-item" :class="isActive === 1?'active':''" @click="toCare()" style="border-bottom: 2px solid gray">
        <div class="text">我的关注</div>
        <div class="count">3</div>
      </div>
      <div class="nav-item" :class="isActive === 2?'active':''"  @click="toFans()">
        <div class="text">我的粉丝</div>
        <div class="count">3</div>
      </div>
    </div>
    <div class="right">
      <router-view></router-view>
    </div>
  </div>
</template>
<script setup>
import {onMounted, ref, watch} from "vue";
import {useRoute, useRouter} from "vue-router";
import emitter from "@/utils/emitter.js";
const isActive = ref(1)
const router = useRouter()
// watch(isActive,(newValue)=>{
//   console.log(newValue);
//
// })
const currentLoginId = ref(Number(localStorage.getItem("userId")))
const currentUserId = ref()
const route = useRoute()
onMounted(()=>{
  currentUserId.value = route.params.userId
  // const path = route.path
  // if(path.includes("care")){
  //   isActive.value = 1
  // }
  // if(path.includes("fans")){
  //   isActive.value = 2
  // }
  emitter.on("switchActive",(val)=>{
    isActive.value = val
  })
})


const toCare = () => {
  // isActive.value = 1
  router.push(`/space/relation/${currentUserId.value}/care`)
}
const toFans = () => {
  // isActive.value = 2
  router.push(`/space/relation/${currentUserId.value}/fans`)
}

</script>
<style lang="scss" scoped>
.box{
  width: 1380px;
  height: 200px;
  background-color: #ffc9c9;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  .left{
    width: 220px;
    height: 86px;
    //background-color: #8fb1ff;
    background-color: #fff;
    border: 2px solid gray;
    border-radius: 10px;
    .nav-item{
      cursor: pointer;
      height: 40px;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
  }
  .right{
    box-sizing: border-box;
    padding-top: 40px;
    padding-left: 60px;
    width: 1160px;
    height: 600px;
    background-color: #87ff89;
  }
}
.active{
  color: white;
  background-color: var(--subject-color--);
}
</style>